<template>
  <div class="gatewayFlowPie">
    <div class="gatewayFlowPie-content" ref="flowChartRef"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide, onMounted, computed, nextTick } from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption,
} from "echarts/components";
import { PieChart, PieSeriesOption } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { useAccessPoint } from "@/store/backend/AccessPointM/accessPoint";

const accessPointer = useAccessPoint();

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | PieSeriesOption
>;

const flowChartRef = ref<HTMLElement>();

const state: { charts: any[] } = { charts: [] };

const initFlowPie = () => {
  const flowChart = echarts.init(flowChartRef.value as HTMLElement);
  const option = {
    title: {
      text: "流量数据卡号",
      subtext: props.gatewayInfo.cardNumber,
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "已用流量" },
          { value: 735, name: "剩余流量" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  flowChart.setOption(option);
  state.charts.push(flowChart);
};

type Props = {
  gatewayInfo?: any;
};
const props = withDefaults(defineProps<Props>(), {
  gatewayInfo: () => {},
});

onMounted(() => {
  console.log("props", props.gatewayInfo);

  nextTick(() => {
    initFlowPie(); //在不同模块的父组件有不同的包裹块 el-col的包裹下需要将任务获取执行延后
  });
});
</script>
<style lang="scss" scoped>
.gatewayFlowPie {
  &-content {
    height: 500px;
  }
}
</style>
